<template>
  <page-container>
    <div>
      <div style="margin: 10px 0">
        <el-input
          style="width: 200px"
          placeholder="请输入名称"
          suffix-icon="el-icon-search"
          v-model="name"
        ></el-input>
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </div>
      <div style="margin: 10px 0">
        <el-button type="primary" @click="save">新增<i class="el-icon-circle-plus-outline"></i></el-button>
        <el-popconfirm
          confirm-button-text="好的"
          cancel-button-text="不用了"
          icon="el-icon-info"
          icon-color="red"
          title="这是一段内容确定删除吗？"
          @confirm="del2"
        >
          <template #reference>
            <el-button class="ml-5 mr-5" type="danger">批量删除<i class="el-icon-remove-outline"></i></el-button>
          </template>
        </el-popconfirm>
      </div>
      <el-table
        :data="tableData"
        border
        stripe
        :header-cell-class-name="'headerBg'"
        row-key="id"
        default-expand-all
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="path" label="路径"></el-table-column>
        <el-table-column prop="pagePath" label="页面路径"></el-table-column>
        <el-table-column label="图标" class-name="fontSize18" align="center" label-class-name="fontSize12">
          <template #default="scope">
            <span :class="scope.row.icon"></span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="sortNum" label="顺序"></el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              @click="handleAdd(scope.row.id)"
              v-if="!scope.row.pid && !scope.row.path"
            >
              新增子菜单 <i class="el-icon-plus"></i>
            </el-button>
            <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text="确定"
              cancel-button-text="我再想想"
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
            >
              <template #reference>
                <el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- Form -->
      <el-dialog title="新增菜单" v-model="dialogFormVisible" width="30%">
        <el-form :model="form" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="form.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="页面路径">
            <el-input v-model="form.pagePath" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.value">
                <i :class="item.value"></i> {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="savaFalse">取 消</el-button>
            <el-button type="primary" @click="saveTure">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </page-container>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import request from "@/utils/request2";
import { ElMessage } from 'element-plus'

const tableData = ref([])
const dialogFormVisible = ref(false)
const form = reactive({})
const multipleSelection = ref([])
const name = ref("")
const options = ref([])

const load = () => {
  request.get("/menu", {
    params: {
      name: name.value,
    }
  }).then(res => {
    tableData.value = res.data
  })
}

const handleSizeChange = (pageSize) => {
  // pageSize.value = pageSize
  // load()
}

const handleCurrentChange = (pageNum) => {
  // pageNum.value = pageNum
  // load()
}

const save = () => {
  dialogFormVisible.value = true
  form.name = ""
  form.path = ""
  form.pagePath = ""
  form.icon = ""
  form.description = ""
  form.pid = ""
  getIcons()
}

const saveTure = () => {
  request.post("/menu", form).then(res => {
    if (res) {
      ElMessage.success("保存成功")
      dialogFormVisible.value = false
      load()
    } else {
      ElMessage.error("保存失败")
      dialogFormVisible.value = false
      load()
    }
  })
}

const savaFalse = () => {
  dialogFormVisible.value = false
  form.name = ""
  form.path = ""
  form.pagePath = ""
  form.icon = ""
  form.description = ""
  form.pid = ""
}

const del = (id) => {
  request.delete("/menu/" + id).then(res => {
    if (res) {
      ElMessage.success("删除成功")
      load()
    } else {
      ElMessage.error("删除失败")
      load()
    }
  })
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const del2 = () => {
  const ids = multipleSelection.value.map(item => item.id)
  request.post("/menu/batch", ids).then(res => {
    if (res) {
      ElMessage.success("批量删除成功")
      load()
    } else {
      ElMessage.error("批量删除失败")
      load()
    }
  })
}

const reset = () => {
  name.value = ""
  load()
}

const handleAdd = (pid) => {
  dialogFormVisible.value = true
  form.name = ""
  form.path = ""
  form.pagePath = ""
  form.icon = ""
  form.description = ""
  form.pid = ""
  if (pid) {
    form.pid = pid
  }
  getIcons()
}

const handleEdit = (row) => {
  form.name = row.name
  form.path = row.path
  form.pagePath = row.pagePath
  form.icon = row.icon
  form.description = row.description
  form.pid = row.pid
  dialogFormVisible.value = true
  getIcons()
}

const getIcons = () => {
  request.get("/menu/icons").then(res => {
    options.value = res.data
  })
}

onMounted(() => {
  load()
})
</script>

<style scoped>
/* 你的样式 */
</style>